<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="">
    <title>项目描述</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/css/css.css" rel="stylesheet" type="text/css">
    <link href="/css/Animation.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="/images/icon.ico">
    <link href="/css/slider.css" rel="stylesheet" type="text/css">
    <script src="/Look_js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script src="/js/slider.js" type="text/javascript"></script>
    <script src="/js/html5.js" type="text/javascript"></script>
    <script src="/js/jquery2.js" type="text/javascript"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/Look_js/jquery.pagination.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link href="/css/buttons.css" rel="stylesheet">
    <script src="/js/wow.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>

        div {
            display: block;
        }

        #ul1 {
            border: 1px solid #f90;
            width: 300px;
            margin: 0px;
            padding: 0px;
            display: none;
            position: absolute;
            background-color:skyblue;
        }

        #ul1 li {
            list-style: none
        }

        #ul1 li a {
            line-height: 30px;
            padding: 5px;
            display: block;
            text-decoration: none;
            color: black
        }

        #ul1 li a:hover {
            background-color: #f90;
            color: white
        }

        .nav {
            width: 100%;
            height: 60px;
            background-color: #fafafa;
            font-size: 14px;
            box-shadow: 0 8px 8px -8px #ccc;
            z-index: 100;
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        .content-block p {
            line-height: 30px;
            margin-bottom: 0;
            white-space: normal;
            word-break: break-all;
        }

        p {
            margin: 0 0 8.5px;
        }

        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        .container {
            width: 1180px;
            padding-left: 0;
            padding-right: 0;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        ul, menu, dir {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        ul, ol {
            margin-top: 0;
            margin-bottom: 8.5px;
        }

        a {
            color: #4877ed;
            text-decoration: none;
            background-color: transparent;
        }

        .nav-inner li a.active {
            border-bottom: 4px solid #4877ed;
        }

        .nav-inner li a {
            display: inline-block;
            border-bottom: 4px solid transparent;
            height: 46px;
            line-height: 42px;
            color: #666;
            cursor: pointer;
        }

        a:hover, a:focus {
            color: #3469ed;
            text-decoration: none;
        }

        a:active, a:hover {
            outline: 0;
        }

        .nav-inner li {
            float: left;
            margin-right: 68px;
            list-style: none;
        }

        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }

        .container {
            width: 1180px;
            padding-left: 0;
            padding-right: 0;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .content-box h5 {
            height: 39px;
            line-height: 38px;
            border-bottom: 1px solid #e5e5e5;
            font-weight: bold;
            font-size: 14px;
            color: #333;
            padding-left: 23px;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .content-box {
            background: #fafafa;
            margin-top: 10px;
            font-size: 14px;
            padding-right: 40px;
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }

        h6 {
            display: block;
            font-size: 0.67em;
            margin-block-start: 2.33em;
            margin-block-end: 2.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }


        .content-block h6 {
            margin-top: 9px;
            margin-bottom: 9px;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            font-weight: bold;
            padding-left: 10px;
            border-left: 3px solid #666;
            margin-left: -12px;
        }

        .content-block p {
            line-height: 30px;
            margin-bottom: 0;
            white-space: normal;
            word-break: break-all;
        }

        .content-block .table > tbody > tr > th {
            white-space: nowrap;
            min-width: 75px;
        }

        .content-block .table > tbody > tr > th, .content-block .table > tbody > tr > td {
            border-top: none;
            border-bottom: 1px solid #e6e6e6;
            word-wrap: break-word;
            word-break: break-all;
            text-align: center;
        }

        .content-block .table > tbody > tr > th, .content-block .table > tbody > tr > td {
            border-top: none;
            border-bottom: 1px solid #e6e6e6;
            word-wrap: break-word;
            word-break: break-all;
            text-align: center;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
        table {border-collapse: collapse;border-spacing: 0;}
        .content-block {padding-left: 46px;padding-bottom: 20px;overflow: hidden;}
        #mimberId{
            width: 300px;
            height: 40px;
        }
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            text-align: center;
            opacity: 0.5;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var oQ = document.getElementById("q");
            oQ.onkeyup = function () {
                var oUl = document.getElementById("ul1");
                if (!this.value) {
                    oUl.style.display = 'none';
                } else {
                    //动态的加载数据

                    var oScript = document.createElement("script");
                    oScript.src = `/js/demo.js`;
                    document.body.appendChild(oScript);

                }
            }
            $("#fanhui").click(function () {
                location.href="/userInformation";
            })
            $.ajax({
                url: "http://localhost:8083/g/getGroupIdBySession",
                success: function (data) {
                    $("#groupId").attr("value", data);
                },
            }).done(function () {
                $.ajax({
                        url: "http://localhost:8083/pi/show",
                        data: {'groupId': $("#groupId").val()},  //注意
                        success: function (data) {
                            $("#1").html("" + data.projectName);
                            $("#1other").html("" + data.projectName);
                            $("#2").html("" + data.projectId);
                            $("#3").html("" + data.groupId);
                            $("#4").html("" + data.photoName);
                            $("#4other").html("" + data.photoName);
                            $("#5").html("" + data.fileName);
                            $("#6").html("" + data.description);
                        }

                    }
                )
            }).done(function () {
                $.ajax({
                        url: "http://localhost:8083/g/queryById",
                        data: {'groupId': $("#groupId").val()},  //注意
                        success: function (data) {
                            var ss = ['max', 'common', 'other'];
                            $("#oneId").html("" + data.memberOneId + "(组长)");
                            if (data.memberOnelevel === ss[0]) {
                                $("#oneLevel").html("<select id='one' style=\"width:75px;height:25px;\"  onclick='a()'>" + "<option style=\"color: deepskyblue;\">" + data.memberOnelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[2] + "</option>" + "</select>");
                            } else {
                                $("#oneLevel").html("<select id='one' style=\"width:75px;height:25px;\"  onclick='a()'>" + "<option style=\"color: deepskyblue;\">" + data.memberOnelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[0] + "</option>" + "</select>");
                            }
                            if (data.memberTwoId != null) {
                                $("#twoId").html("" + data.memberTwoId);
                                if (data.memberTwolevel === ss[1]) {
                                    $("#twoLevel").html("<select id='two' style=\"width:75px;height:25px;\" onclick='b()' >" + "<option style=\"color: deepskyblue;\">" + data.memberTwolevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[2] + "</option>" + "</select>");
                                } else {
                                    $("#twoLevel").html("<select id='two' style=\"width:75px;height:25px;\" onclick='b()' >" + "<option style=\"color: deepskyblue;\">" + data.memberTwolevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[1] + "</option>" + "</select>");
                                }
                            }
                            if (data.memberThreeId != null) {
                                $("#threeId").html("" + data.memberThreeId);
                                if (data.memberThreelevel === ss[1]) {
                                    $("#threeLevel").html("<select id='three' style=\"width:75px;height:25px;\" onclick='c()' >" + "<option style=\"color: deepskyblue;\">" + data.memberThreelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[2] + "</option>" + "</select>");
                                } else {
                                    $("#threeLevel").html("<select id='three' style=\"width:75px;height:25px;\" onclick='c()' >" + "<option style=\"color: deepskyblue;\">" + data.memberThreelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[1] + "</option>" + "</select>");
                                }
                            }
                            if (data.memberFourId != null) {
                                $("#fourId").html("" + data.memberFourId);
                                if (data.memberFourlevel === ss[1]) {
                                    $("#fourLevel").html("<select id='four' style=\"width:75px;height:25px;\" onclick='d()'>" + "<option style=\"color: deepskyblue;\">" + data.memberFourlevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[2] + "</option>" + "</select>");
                                } else {
                                    $("#fourLevel").html("<select id='four' style=\"width:75px;height:25px;\" onclick='d()'>" + "<option style=\"color: deepskyblue;\">" + data.memberFourlevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[1] + "</option>" + "</select>");
                                }
                            }
                            if (data.memberFiveId != null) {
                                $("#fiveId").html("" + data.memberFiveId);
                                if (data.memberFivelevel === ss[1]) {
                                    $("#fiveLevel").html("<select id='five' style=\"width:75px;height:25px;\" onclick='e()'>" + "<option style=\"color: deepskyblue;\">" + data.memberFivelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[2] + "</option>" + "</select>");
                                } else {
                                    $("#fiveLevel").html("<select id='five' style=\"width:75px;height:25px;\" onclick='e()'>" + "<option style=\"color: deepskyblue;\">" + data.memberFivelevel + "</option>" + "<option style=\"color: deepskyblue;\">" + ss[1] + "</option>" + "</select>");
                                }
                            }
                        }
                    }
                )
            })

        })

        function a() {
            $.ajax({
                    url: "http://localhost:8083/g/updatelevel",
                    data: {'memberLevel': $("#one").val(), 'groupId': '2', 'member': 'memberOnelevel'},//注意这里
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (data) {
                    }
                }
            )
        }

        function b() {
            $.ajax({
                    url: "http://localhost:8083/g/updatelevel",
                    data: {'memberLevel': $("#two").val(), 'groupId': '2', 'member': 'memberTwolevel'},//注意这里
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (data) {
                    }
                }
            )
        }

        function c() {
            $.ajax({
                    url: "http://localhost:8083/g/updatelevel",
                    data: {'memberLevel': $("#three").val(), 'groupId': '2', 'member': 'memberThreelevel'},//注意这里
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (data) {
                    }
                }
            )
        }

        function d() {
            $.ajax({
                    url: "http://localhost:8083/g/updatelevel",
                    data: {'memberLevel': $("#four").val(), 'groupId': '2', 'member': 'memberFourlevel'},//注意这里
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (data) {
                    }
                }
            )
        }

        function e() {
            $.ajax({
                    url: "http://localhost:8083/g/updatelevel",
                    data: {'memberLevel': $("#five").val(), 'groupId': '2', 'member': 'memberFivelevel'},//注意这里
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (data) {
                    }
                }
            )
        }

        function invite() {
            $.ajax({
                url: "http://localhost:8083/invite",
                data: {'memberId': $("#memberId").val(), 'groupId': $("#groupId").val()},
                success:function (data) {
                    if (data == 1) {
                        alert('已发出邀请，等待对方同意');
                    }else if (data == 2){
                        alert('对方还未响应，请不要重复邀请');
                    }else {
                        alert('不存在此Id的人才，请检查是否输入错误，或者点击寻找人才进入人才广场核对');
                    }
                }
            })
        }

        function findtalent() {
            location.href="/lookingtalents";
        }
    </script>
    <script>
        function download(data) {
            var oUl = document.getElementById("ul1");
            var oQ = document.getElementById("q");
            if (oQ.value == "1" || oQ.value == "10" || oQ.value == "107") {
                var arr = data.s;
            }
            if (oQ.value == "2" || oQ.value == "23" || oQ.value == "233") {
                var arr = data.s1;
            }
            oUl.style.display = 'block';
            oUl.innerHTML = '';

            for (var i = 0; i < arr.length; i++) {
                var oLi = document.createElement("li");
                var oA = document.createElement("a");
                oA.innerHTML = arr[i];
                oLi.appendChild(oA);
                oUl.appendChild(oLi);
            }
            var li_arr = oUl.getElementsByTagName("li");
            for (var i = 0; i < li_arr.length; i++) {
                li_arr[i].onclick = function () {
                    oQ.value = this.innerText;
                    oUl.style.display = 'none';
                }
            }
        }
    </script>
    <script>

        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
    </script>

</head>
<body>
<input type="hidden" id="groupId" name="groupId" value=""/>
<div class="nav" id="navbar" style="position:static;top:0px">
    <ul class="container nav-inner clearfix">
        <li>
            <a data-href="contest" class="active">项目简述</a>
        </li>
        <li>
            <a data-href="project">项目详情</a>
        </li>
        <li>
            <a data-href="team">团队信息</a>
        </li>
        <!--            <li>-->
        <!--                <a data-href="patent">专利情况</a>-->
        <!--            </li>-->
    </ul>
</div>
<div style="margin: 10px">
    <div class="content-box" id="contest">
        <h5><i class="iconfont icon-trophy1"></i>项目简述</h5>
        <div class="content-block">
            <p>
                项目名称：
                <span id="1"></span>

            </p>
            <p>
                项目编号：
                <span id="2"></span>
            </p>

            <p>
                小组编号：
                <span id="3"></span>
            </p>
            <p>
                项目类别：
                <span id="4"></span>
            </p>
            <p>
                项目文件名：
                <span id="5"></span>

            </p>
        </div>
    </div>

    <div class="content-box" id="project">
        <h5><i class="iconfont icon-list1"></i>项目详情</h5>
        <div class="content-block">
            <h6>项目名称</h6>

            <p id="1other"></p>
        </div>
        <div class="content-block">
            <h6>项目类别</h6>

            <p id="4other"></p>
        </div>
        <div class="content-block">
            <h6>项目概述</h6>
            <p id="6" style="white-space: pre-wrap;"></p>

        </div>
    </div>

    <!--分割线---------------------------------------->
    <div id="invite" style="position: relative">
        <input type="text" id="memberId" placeholder="请输入人才的ID" required/>
        <ul id='ul1'></ul>
        <button onclick="invite()"  class="button button-3d button-primary button-rounded" style="position: absolute;left: 320px;top: 0px">邀请人才</button>
        <button onclick="findtalent()" class="button button-3d button-primary button-rounded" style="position: absolute;left: 500px;top: 0px">寻找人才</button>
        <button id="fanhui" class="button button-3d button-primary button-rounded" style="position: absolute;left: 680px;top: 0px">返回个人主页</button>
    </div>
    <!--分割线---------------------------------------->
    <div class="content-box" id="team">
        <h5><i class="iconfont icon-group"></i>团队信息</h5>
        <div class="content-block">
            <h6>团队成员</h6>
            <table class="table table-list">
                <!--可以通过它来消除表格中的行线,因为如果小组没满,前端表格会显示多余的行线：<table rules="cols">-->
                <colgroup>
                    <col/>
                    <col width="100"/>
                    <col/>
                    <col width="100"/>
                    <col/>
                    <col/>
                    <col/>
                    <col width="90"/>
                </colgroup>
                <tr>
                    <th style="min-width: 90px;">编号</th>
                    <th>权限</th>
                </tr>
                <tr>
                    <td id="oneId"></td>
                    <td id="oneLevel"></td>
                </tr>
                <tr>
                    <td id="twoId"></td>
                    <td id="twoLevel"></td>
                </tr>
                <tr>
                    <td id="threeId"></td>
                    <td id="threeLevel"></td>
                </tr>
                <tr>
                    <td id="fourId"></td>
                    <td id="fourLevel"></td>
                </tr>
                <tr>
                    <td id="fiveId"></td>
                    <td id="fiveLevel"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>
</body>
</html>
